<template>
  <div class="address-assign-container">
    <div class="header">
      <el-button type="primary" @click="showAddressEditor">新增地址</el-button>
    </div>

    <el-table :data="products" style="width: 100%" border>
      <el-table-column prop="productId" label="商品ID" width="120"></el-table-column>
      <el-table-column prop="merchandiseName" label="商品名称"></el-table-column>
      <el-table-column label="分配地址" width="300">
        <template #default="{ row }">
          <el-select
              v-model="row.addressId"
              placeholder="选择地址"
              @change="handleAddressChange(row)"
          >
            <el-option
                v-for="addr in addresses"
                :key="addr.addressId"
                :label="formatAddress(addr)"
                :value="addr.addressId"
            />
            <el-option
                label="+ 添加新地址"
                value="new"
                class="add-address-option"
            />
          </el-select>
        </template>
      </el-table-column>
    </el-table>

    <address-editor
        v-model="visibleEditor"
        :address="currentAddress"
        @submit="handleAddressSubmit"
    />
  </div>
</template>

<script>import AddressEditor from './AddressEditor.vue'
import {listMerInfo} from "@/api/system/merinfo.js";

export default {
  components: { AddressEditor },
  props: {
    products: {
      type: Array,
      default: () => []
    },
    addresses: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visibleEditor: false,
      currentAddress: null,
      localProducts: [...this.products]
    }
  },

  mounted() {

    this.getMerListInfo();

  },
  watch: {
    // 同步props变化
    products(newVal) {
      this.localProducts = [...newVal];
    }
  },

  methods: {

    async getMerListInfo() {
      try {
        const response = await listMerInfo();
        const processedData = response.rows.map(item => ({
          ...item,
          orderNum: 0
        }));

        // 改为操作本地数据
        this.localProducts = processedData;

        // 通知父组件更新
        this.$emit('update:products', processedData);

        console.log('Loaded products:', processedData);
      } catch (error) {
        console.error('Error loading products:', error);
        this.$message.error('商品加载失败');
      }
    },

    formatAddress(addr) {
      return `${addr.state} ${addr.city} ${addr.district} ${addr.streetAddress}`
    },
    handleAddressChange(product) {
      if (product.addressId === 'new') {
        this.currentAddress = null
        this.visibleEditor = true
      } else {
        this.$emit('address-change', product)
      }
    },
    showAddressEditor() {
      this.currentAddress = null
      this.visibleEditor = true
    },
    handleAddressSubmit(newAddress) {
      this.$emit('address-add', newAddress)
      this.visibleEditor = false
    }
  }
}
</script>

<style scoped>.address-assign-container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.add-address-option {
  color: #409EFF;
  font-weight: bold;
}
</style>